<template>
  <view class="container">
    <view class="header">
      <text class="back-button" @click="goBack">←</text>
      <text class="title">重置密码</text>
    </view>
    
    <!-- 轮播广告 -->
    <view class="banner-wrapper">
      <ad-banner></ad-banner>
    </view>
    
    <view class="form-container">
      <view class="input-group">
        <text class="input-label">手机号码</text>
        <view class="input-wrapper" :class="{'active': activeInput === 'phone'}">
          <text class="input-icon">📱</text>
          <input 
            type="number" 
            class="input-field" 
            placeholder="请输入手机号码" 
            v-model="phone"
            @focus="activeInput = 'phone'"
            @blur="activeInput = ''"
          />
        </view>
      </view>
      
      <view class="input-group">
        <text class="input-label">验证码</text>
        <view class="verification-group">
          <view class="input-wrapper verification-input-wrapper" :class="{'active': activeInput === 'code'}">
            <text class="input-icon">🔑</text>
            <input 
              type="text" 
              class="input-field" 
              placeholder="请输入验证码" 
              v-model="code"
              @focus="activeInput = 'code'"
              @blur="activeInput = ''"
            />
          </view>
          <button 
            class="verification-button" 
            :class="{'disabled': countdown > 0}"
            @click="handleSendCode"
          >
            {{countdown > 0 ? `${countdown}s` : '获取验证码'}}
          </button>
        </view>
      </view>
      
      <view class="input-group">
        <text class="input-label">新密码</text>
        <view class="input-wrapper" :class="{'active': activeInput === 'password'}">
          <text class="input-icon">🔒</text>
          <input 
            :type="showPassword ? 'text' : 'password'" 
            class="input-field" 
            placeholder="请输入新密码" 
            v-model="newPassword"
            @focus="activeInput = 'password'"
            @blur="activeInput = ''"
          />
          <text 
            class="password-toggle" 
            @click="showPassword = !showPassword"
          >{{showPassword ? '👁️' : '👁️‍🗨️'}}</text>
        </view>
      </view>
      
      <button class="submit-button" @click="handleResetPassword">
        重置密码
      </button>
    </view>
  </view>
</template>

<script>
import { sendCode, forgotPassword } from '@/api/user.js'
import AdBanner from '@/components/AdBanner.vue'

export default {
  components: {
    AdBanner
  },
  data() {
    return {
      activeInput: '',
      phone: '',
      code: '',
      newPassword: '',
      showPassword: false,
      countdown: 0
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    async handleSendCode() {
      if (this.countdown > 0) return
      
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      
      try {
        const response = await sendCode({
          phone: this.phone
        })
        
        if (response.data.success) {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          })
          this.startCountdown()
        } else {
          uni.showToast({
            title: response.data.message || '发送失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('发送验证码失败:', error)
        uni.showToast({
          title: '发送失败',
          icon: 'none'
        })
      }
    },
    async handleResetPassword() {
      if (!this.phone || !this.code || !this.newPassword) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      try {
        const response = await forgotPassword({
          phone: this.phone,
          code: this.code,
          newPassword: this.newPassword
        })
        
        if (response.data.success) {
          uni.showToast({
            title: '密码重置成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: response.data.message || '重置失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('重置密码失败:', error)
        uni.showToast({
          title: '重置失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.back-button {
  font-size: 24px;
  color: #666;
  padding: 10px;
  margin-left: -10px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-right: 44px;
}

.form-container {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 20px;
}

.input-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0 15px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.input-wrapper.active {
  border-color: #2989d8;
  box-shadow: 0 0 0 2px rgba(41, 137, 216, 0.1);
}

.input-icon {
  margin-right: 10px;
  font-size: 16px;
  color: #999;
}

.input-field {
  flex: 1;
  height: 100%;
  border: none;
  font-size: 16px;
  background: transparent;
}

.input-field:focus {
  outline: none;
}

.verification-group {
  display: flex;
  gap: 10px;
}

.verification-input-wrapper {
  flex: 1;
}

.verification-button {
  padding: 0 20px;
  background: #2989d8;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.verification-button.disabled {
  background: #ccc;
  cursor: not-allowed;
}

.password-toggle {
  padding: 5px;
  color: #999;
  cursor: pointer;
}

.submit-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #1e5799, #2989d8);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
}

.submit-button:active {
  opacity: 0.9;
}

/* 轮播广告容器 */
.banner-wrapper {
  width: 100%;
  padding: 0 20px;
  margin: 10px 0 20px 0;
  box-sizing: border-box;
}
</style> 